<template>
    <div id="sameTypeProduct" class="clearfix">
        <h1>同类产品</h1>
        <hr>
        <div class="product" v-for="(pro,i) in products" :key="i">
            <img :src="pro.url" alt="">
            <div class="price">{{pro.price}}元/斤</div>
        </div>
    </div>
</template>

<script>
export default {
    name:'sameTypeProduct',
    props:{
        products:Array
    }
}
</script>

<style lang="less" scoped>
.clearfix::after,
.clearfix::before{
    display: table;
    content: '';
    clear: both;
}
#sameTypeProduct{
    background-color: white;
    h1{
        margin-left: 15px;
    }
    hr{
        width: 300px;
        display: block;
        margin-left: 20px;
        margin-right: 20px;
        color: gray;
    }
    .product{
        width: 300px;
        margin-left: 20px;
        margin-bottom: 20px;
        border: solid 1px;
        img{
            width: 300px;
            height: 190px;
        }
        .price{
            line-height: 30px;
            text-align: center;
        }
    }
}
</style>